// 功能分析：
// 1、进页面先获取轮播图列表，渲染到tbody中
// 2、点击上传图片按钮，触发input file功能，添加到页面新的一行
// 3、点击删除按钮，删除整行
// 4、点击状态按钮，切换状态1或者2，如果后台状态为1，span为1的显示，状态为2，span为2的显示

// -----------------------------获取轮播图列表渲染到tbody中
function getSwiper (){
  $.ajax({
    url:'/admin/swipers',
    success:function(res){
      console.log(res)
  let tr = ''
  res.data.forEach(item => {
    if(item.swiperstatus===1){
      tr += ` <tr>
      <td>${item.id}</td>
      <td><img src="http://localhost:8888/uploads/${item.swiperimg}" alt="" /></td>
      <td>${item.swiperimg}</td>
      <td>
        <span
          data-id="${item.id}"
          data-status="${item.swiperstatus}"
          class="layui-badge layui-bg-green">√
        </span>
      </td>
      <td>
        <button
          type="button"
          data-id="${item.id}"
          class="layui-btn layui-btn-danger layui-btn-xs delete">
          删除
        </button>
      </td>
    </tr>`
    }else{
      tr += ` <tr>
      <td>${item.id}</td>
      <td><img src="http://localhost:8888/uploads/${item.swiperimg}" alt="" /></td>
      <td>${item.swiperimg}</td>
      <td>
        <span
          data-id="${item.id}"
          data-status="${item.swiperstatus}"
          class="layui-badge layui-bg-cyan">×
        </span>
      </td>
      <td>
        <button
          type="button"
          data-id="${item.id}"
          class="layui-btn layui-btn-danger layui-btn-xs delete">
          删除
        </button>
      </td>
    </tr>`
    }
  });
  $('tbody').html(tr)
    }
  })
}
getSwiper ()

// -----------------------------点击修改轮播图状态
// 事件委托
$('tbody').on('click','.layui-badge',function(){
let id = $(this).data('id')
let status = $(this).data('status')
if(status===1){
  status=2
}else {
  status=1
}
$.ajax({
  type:'PUT',
  url:'/admin/swipers/' + id,
  data:{status:status},
  success:function(res){
    console.log(res)
if (res.status === 0){
  layer.msg(res.message)
  getSwiper ()
}
  }
})
})

// -----------------------------点击删除按钮，删除行
$('tbody').on('click','.delete',function(){
let id = $(this).data('id')
layer.confirm('确定要删除吗?', function(index){
  $.ajax({
    type:'DELETE',
    url:'/admin/swipers/' + id,
    success:function(res){
      layer.msg(res.message)
      getSwiper ()
    }
  })
  layer.close(index);
});       




})

// 点击上传图片
$('#btn').on('click',function(){
  $('#file').trigger('click')
  $('#file').on('change',function(){
   if(this.files.length>0){
    let fd = new FormData()
    for(let i =0;i<this.files.length;i++){
      fd.append('swipers',this.files[i])
    }
    $.ajax({
      type:'POST',
      url:'/admin/swipers',
      data:fd,
      processData:false,
      contentType:false,
      success:function(res){
        console.log(res)
        if(res.status===0){
          layer.msg(res.message)
          getSwiper ()

        }
      }
    })
   }
  })
})